<template>
    <el-dialog
            title="登录"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" label-width="90px" :model="form" :rules="rules" class="demo-ruleForm">
            <el-col :span="24">
                <el-form-item label="帐号：" prop="username">
                    <el-input v-model="form.username" type="text" maxlength="11" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="form.password" type="password" maxlength="11" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="验证码：" prop="code">
                    <div style="display: flex">
                        <el-input type="text" v-model="form.code"></el-input>
                        <div class="login-code">
                            <img :src="codeUrl"
                                 @click="getCode">
                        </div>
                    </div>
                </el-form-item>
            </el-col>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="login">登 录</el-button>
          </span>
    </el-dialog>
</template>

<script>
    import * as u from '@/util/util'
    import * as c from '@/util/config'

    export default {
        name: "loginDia",
        data() {
            return {
                dialogVisible: false,
                form: {
                    username: '',
                    password: '',
                    code: '',
                    randomStr: u.uuid(),
                },
                rules: {
                    username: [{required: true, message: '请输入', trigger: 'blur'}],
                    password: [{required: true, message: '请输入', trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'},],
                },
                //验证码图片url
                codeUrl: "",
            }
        },
        methods: {
            //获取验证码
            getCode() {
                this.form.randomStr=u.uuid();
                this.$HttpService.get("/sys-login/getCode", {
                    randomStr: this.form.randomStr,
                }).then(res => {
                    this.codeUrl = res;
                })
            },
            //打开弹框
            openDia() {
                this.getCode();
                this.dialogVisible = true;
            },

            login() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$HttpService.reqForm({
                            url: "/login",
                            method: "post",
                            data: this.form,
                        }).then(res => {
                            //切换路由
                            //设置存储用户基本信息
                            window.sessionStorage.setItem(c.sessionKey.TOKEN, res.token);
                            this.$util.setSession(c.sessionKey.USER_INFO, res.userInfo);
                            this.$util.setSession(c.sessionKey.SYS_MENU_TREE, res.userInfo.sysMenus);
                            this.$util.setSession(c.sessionKey.SYS_PERMISSIONS, res.userInfo.permissions);
                            this.dialogVisible=false;
                            this.$store.commit("setUserInfo",res.userInfo)
                        }).catch(() => {
                            this.getCode();
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
